<script lang="ts" setup>
import type { FormBasicConfig } from '../type'
import { inject } from 'vue'

const formBasicConfig = inject('formBasicConfig') as FormBasicConfig
const rules = ref({
  name: [
    { required: true, message: '请输入表单名称', trigger: 'blur' },
  ],
})
</script>

<template>
  <ElForm :model="formBasicConfig" :rules="rules" label-width="100px">
    <ElFormItem label="总栅格">
      <ElInput v-model="formBasicConfig.totalColumns" type="number" min="1" max="24" placeholder="请输入栅格列数" />
    </ElFormItem>
    <ElFormItem label="栅格间距">
      <ElInput
        v-model="formBasicConfig.gridGap" type="number" min="0" max="24" placeholder="请输入栅格间距"
      >
        <template #append>
          px
        </template>
      </ElInput>
    </ElFormItem>
  </ElForm>
</template>
